<!DOCTYPE html>
<#import "/spring.ftl" as spring />
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <title>外教君TPO</title>
    <link rel="stylesheet" type="text/css" href="<@spring.url '/css/reset.css'/>"/>
    <link rel="stylesheet" type="text/css" href="<@spring.url '/css/home.css'/>"/>
    <style>
        .ho_content {
            height: 13.34rem;
        }

        .day_hour, .num_word {
            margin-bottom: 0.2rem;
        }

        .learn_data {
            left: 0;
            right: 0;
            margin: auto;
            width: 6.9rem;
            height: 7rem;
        }

        .learn_data h2 {
            margin-top: 0.3rem;
            margin-bottom: 0.3rem;
        }

        .Senior {
            margin-top: 0.2rem;
            text-align: center;
            font-family: PingFang-SC-Bold;
            font-weight: bold;
            font-size: 0.46rem;
        }

        .QRDiv {
            width: 7.5rem;
            display: flex;
            justify-content: space-around;
            align-items: center;
            font-size: 0.3rem;
            font-family: PingFang-SC-Regular;
        }

        .QRImg {
            width: 2rem;
            height: 2rem;
        }

        .money {
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="wrap">
    <div class="ho_content">
        <img class="topBg" src="<@spring.url '/img/home/HomeTopImg2@3x.png'/>" alt="">
        <div class="learn_data">
            <h3 class="Senior">{{nickname}}</h3>
            <h2>
                <img class="armImg" src="<@spring.url '/img/home/comeL.png'/>" alt="">
                <span>已在外教君托福 坚持托福听力</span>
                <img class="armImg" src="<@spring.url '/img/home/comeR.png'/>" alt="">
            </h2>
            <div class="data_content">
                <div class="day_hour">
                    <p class="data_items">
                        <span class="learn_num">{{learnDay}}</span>
                        <span class="learn_num">天</span>
                        <img class="learn_data_logo" src="<@spring.url '/img/home/dayY2.png'/>" alt=""><br>
                        <span class="learn_title">学习天数</span>
                    </p>
                    <p class="data_items">
                        <span class="learn_num">{{learnMin}}</span>
                        <span class="learn_num" v-show="TimeH">小时</span>
                        <span class="learn_num" v-show="TimeM">分钟</span>
                        <img class="learn_data_logo" src="<@spring.url '/img/home/clockG2x2.png'/>" alt=""><br>
                        <span class="learn_title">总时长</span>
                    </p>
                </div>
                <div class="num_word">
                    <p class="data_items">
                        <span class="learn_num">{{questionNum}}</span>
                        <span class="learn_num">道</span>
                        <img class="learn_data_logo" src="<@spring.url '/img/home/abcLogo2.png'/>" alt=""> <br>
                        <span class="learn_title">练习题数</span>
                    </p>
                    <p class="data_items">
                        <span class="learn_num">{{learnWord}}</span>
                        <span class="learn_num">个</span>
                        <img class="learn_data_logo" src="<@spring.url '/img/home/wordB2.png'/>" alt=""><br>
                        <span class="learn_title">掌握词汇</span>
                    </p>
                </div>
            </div>

        </div>
        <div class="QRDiv">
            <p>长按识别二维码</p>
            <img class="QRImg" src="${qrUrl}" alt="">
            <p>立砍<span class="money">30元</span>购买</p>
        </div>
    </div>
</div>
</body>
</html>
<script src="<@spring.url '/js/basis.js'/>" type="text/javascript" charset="utf-8"></script>
<script src="<@spring.url '/js/vue.js'/>" type="text/javascript" charset="utf-8"></script>
<script src="<@spring.url '/js/vue-resource.js'/>" charset="utf-8"></script>
<script type="text/javascript">
    const vm = new Vue({
        el: '#wrap',
        data: {
            learnDay: 0,
            learnMin: 0,
            questionNum: 0,
            learnWord: 0,
            TimeH: false,
            TimeM: true,
            nickname:'',
        },
        mounted: function () {
            //首页的数据请求
//            this.$http.post(URL + '/tpo/index/data', {}).then(function (res) {
            var url = "<@spring.url '/share/data/${openid}'/>";
            this.$http.post(url, {}).then(function (res) {
                console.log(res.data);
                if (res.data.status == 200) {
                    this.learnDay = res.data.data.studyDays;
                    this.learnMin = res.data.data.studyDuration;
                    this.nickname = res.data.data.nickname;
                    if (this.learnMin > 3600) {
                        var hours = this.learnMin / 3600;
                        this.learnMin = hours.toFixed(1);
                        this.TimeH = true;
                        this.TimeM = false;
                    } else {
                        var mins = this.learnMin / 60;
                        this.learnMin = mins.toFixed(1);
                        this.TimeH = false;
                        this.TimeM = true;
                    }
                    this.questionNum = res.data.data.questionNumber;
                    this.learnWord = res.data.data.quantityOfVocabulary;
                }
                if (res.data.status == 400) {
                    console.log(res.data.status)
                    alert('home400' + res.data.message);
                }
                if (res.data.status == 500) {
                    console.log(res.data.status)
                    alert('home500' + res.data.message);
                }
            }, function (res) {
                console.log('失败');
                console.log(res.status);
                console.log(res);
            })
        }
    })

</script>